<template>
    <div class="contentContainer">
        <!-- 橱窗图片上传模块 -->
        <div class="input">
            <div>橱窗图片：</div>
            <el-upload
                ref="uploadComponent"
                action="http://localhost:3000/api/v1/common/image/upload"
                method="post"
                name="file"
                list-type="picture"
                :limit="1"
                :on-success="uploadImageSuccess"
                :on-error="uploadImageError"
                style="margin-top: 20px;"
            >
                <!-- 自定义缩略图和上传按钮的展示逻辑 -->
                <el-button 
                    v-show="(goods.image ?? '').length === 0"
                    type="primary"
                >
                    选择商品橱窗图
                </el-button>
                <template #file="file">
                    <img 
                        :src="goods.image ?? ''" 
                        alt=""
                        class="el-upload-list__item-thumbnail"
                    />
                    <el-icon 
                        style="font-size: 20px; position: absolute; right: 30px;"
                        @click="uploadImageRemove(file)"
                    >
                        <Delete />
                    </el-icon>
                </template>
            </el-upload>
        </div>
        <!-- 各种表单模块 -->
        <div
            v-show="(props.mode ?? 0) === 1" 
            class="input"
        >
            <span>商品ID：</span>
            <el-input 
                v-model="goods.id"
                style="width: 200px;"
                placeholder="请输入内容"
                disabled
            />
        </div>
        <div class="input">
            <span>商品名称：</span>
            <el-input 
                v-model="goods.name"
                style="width: 200px;"
                placeholder="请输入内容"
            />
        </div>
        <div class="input">
            <span>商品品牌：</span>
            <el-input 
                v-model="goods.brand"
                style="width: 200px;"
                placeholder="请输入内容"
            />
        </div>
        <div class="input">
            <span>商品描述：</span>
            <el-input 
                v-model="goods.description"
                style="width: 200px;"
                placeholder="请输入内容"
            />
        </div>
        <div class="input"> 
            <span>商品价格：</span>
            <el-input 
                v-model="goods.price"
                type="number"
                :min="0"
                style="width: 200px;"
            />
        </div>
        <div class="input">
            <span>折扣价格：</span>
            <el-input 
                v-model="goods.discounted_price"
                type="number"
                :min="0"
                style="width: 200px;"
            />
        </div>
        <div class="input">
            <span>库存数量：</span>
            <el-input 
                v-model="goods.stock"
                type="number"
                :min="0"
                style="width: 200px;"
            />
        </div>
        <div class="input">
            <span>商品状态：</span>
            <el-select v-model="goods.status">
                <el-option :key="0" label="未上架" :value="0" />
                <el-option :key="1" label="已上架" :value="1" />
            </el-select>
        </div>
        <div class="input">
            <span>商品类别：</span>
            <el-select 
                v-model="goods.category.id"
                placeholder="请选择商品类别"
            >
                <el-option 
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </div>
        <div class="input">
            <div>商品详情：</div>
            <!-- 富文本编辑器部分 -->
            <div style="margin: 30px; border: gainsboro 1px solid;">
                <Toolbar 
                    :editor="editorRef"
                    :defaultConfig="toolbarConfig"
                    style="border-bottom: 1px solid #ccc;"
                />
                <Editor 
                    v-model="goods.detail"
                    :defaultConfig="editorConfig"
                    style="height: 400px; overflow-y: hidden;"
                    @onCreated="handleCreated"
                />
            </div>
        </div>
        <!-- 确认按钮 -->
         <div class="input">
            <el-button 
                type="primary"
                :disabled="disableCheck"
                @click="confirmAction"
            >
                {{ (props.mode ?? 0) === 0 ? '创建商品' : '保存更改' }}
            </el-button>
         </div>
    </div>
</template>
<script setup lang="ts">
// 引入要用的模块
// UI组件
import { ElMessage, type UploadFile, type UploadInstance, type UploadRawFile } from 'element-plus';
// vue框架中需要用到的
import { computed, getCurrentInstance, type ComponentInternalInstance, ref, onMounted, shallowRef, onBeforeUnmount } from 'vue';
// 网络接口相关
import { RequestPath, startRequest } from '../base/RequestWork';
// 富文本编辑器相关
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import type { IDomEditor } from '@wangeditor/editor';
// 路由模块
import { useRouter } from 'vue-router';

// 路由管理对象
const router = useRouter();
// 当前组件实例的代理对象
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 外部属性
// mode: 0新增，1编辑
// id: 新增商品时为undefined，编辑商品时为商品id
const props = defineProps<{
    mode: number;
    id: number;
}>();
// 编辑商品数据
const goods = ref({
    name: '', description: '', brand: '', image: '', category: { id: null }, detail: '', id: null, price: 0, discounted_price: 0, stock: 0, status: 0
});
// 所有类别数据，用来进行类别选择
const categoryList = ref()
// 编辑器实例
const editorRef = shallowRef();
// 过滤编辑器不需要的功能
const toolbarConfig = {
    excludeKeys: [
        'group-video',
        'fullScreen'
    ]
};
// 配置编辑器功能
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            server: 'http://localhost:3000/api/v1/common/image/upload',
            fieldName: 'file',
            customInsert(res: any, insertFn: any) {
                insertFn(res.url, '', '')
            },
            maxFileSize: 10 * 1024 * 1024
        }
    }
};
// 编辑器创建完成的回调函数
const handleCreated = (editor: IDomEditor) => {
    editorRef.value = editor; // 记录editor实例
}
// 生命周期：组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor === null) return;
    editor.destroy();
});
// 生命周期，组件挂载时进行数据加载
onMounted(() => {
    // 请求类别数据
    loadCategoryData();
    // 请求商品数据
    loadGoodsData()
})
// 请求类别数据的方法
const loadCategoryData = () => {
    // 请求所有类别数据
    startRequest(RequestPath.goodsCategoryGet, 'get', {}).then((response) => {
        const data = response.data;
        categoryList.value = data.datas ?? [];
    }).catch((error) => {
        ElMessage.error({ message: error.response.data.error });
    })
}
// 获取商品详情数据
const loadGoodsData = () => {
    // 是编辑模式再进行请求
    if ((props.mode ?? 0) === 1 && props.id) {
        // 请求商品数据
        startRequest(RequestPath.goodsGet, 'get', {
            id: props.id
        }).then((response) => {
            goods.value = response.data.datas[0];
            // 对上传图片组件的缩略图进行回显
            let blob = null;;
            let xhr = new XMLHttpRequest();
            xhr.open('get', goods.value.image);
            xhr.setRequestHeader('Accept', 'image/png');
            xhr.responseType = 'blob';
            xhr.onload = () => {
                blob = xhr.response;
                const imageFile = new File([blob], '', { type: 'image/png' }) as UploadRawFile;
                imageFile.uid = 0;
                // el-upload 组件的添加文件方法
                (proxy?.$refs.uploadComponent as UploadInstance).handleStart(imageFile);
            } 
            xhr.send();
        }).catch((error) => {
            ElMessage.error({
                message: error.response.data.error
            });
        });
    }
}
// 计算属性，控制创建按钮的禁用状态
const disableCheck = computed(() => {
    // 商品的数据都为空，再允许按钮可用
    return !(goods.value.image.length > 0
        && goods.value.name.length > 0
        && goods.value.brand.length > 0
        && goods.value.description.length > 0
        && goods.value.detail.length > 0
        && goods.value.category.id !== null
    );
});
// 上传成功的回调方法
const uploadImageSuccess = (data: any) => {
    ElMessage.success({ message: '图片添加成功' });
    goods.value.image = data.url.replace(/\\/g, '/');
}
// 上传失败的回调方法
const uploadImageError = () => {
    ElMessage.error({ message: '图片添加失败，请重试' });
}
// 删除上传的文件的回调方法
const uploadImageRemove = (file: UploadFile) => {
    goods.value.image = '';
    // 手动将Upload组件显示的缩略图删除
    (proxy?.$refs.uploadComponent as UploadInstance).handleRemove(file);
}
// “确认”按钮被单机时执行的方法
const confirmAction = () => {
    // 拼装参数
    const params: any = { 
        ...goods.value,
        price: +goods.value.price,
        discounted_price: +goods.value.discounted_price,
        stock: +goods.value.stock
    };
    
    let path = RequestPath.goodsUpdate;
    if ((props.mode ?? 0) === 0) {
        // 如果是新建商品模式，则将参数中的id去掉
        delete params.id;
        // 如果新建，将Path修改为创建商品的URL
        path = RequestPath.goodsAdd;
    }
    // 通过后端接口创建商品
    startRequest(path, 'post', params).then(() => {
        ElMessage.success({ message: '操作成功' });
        // 跳转到商品管理模块
        router.replace({ name: 'goodsManager' });
    }).catch((error) => {
        ElMessage.error({ message: error.response.data.error });
    })
}
</script>
<style scoped>
    .input {
        margin-top: 40px;

    }
</style>